<template>
  <div class="goods-details" :class="(info.play == false) ? 'active' : ''">
    <span class="img" v-show="info.audio_type == '0'"><img :src="info.img" alt=""></span>
    <div class="img" v-show="info.audio_type == '1'">
      <div class="video-play" v-if="videos">
        <video :src="videos" @click="pauseVideo()" id="video" width="100%" height="100%" :poster="info.img"></video>
        <div class="mask-bg-video" @click="playVideo()" v-if="is_show"><img src="@/assets/xiangqing.png" alt=""></div>
      </div>
      <img :src="info.img" v-else alt="">
    </div>
    <div class="top">
      <p class="title">{{info.title}}</p>
      <p class="tag">
        <img src="@/assets/shipinxiangqing02.png" @click="collect" v-show="!info.isCollect" alt="">
        <img src="@/assets/shipinxiangqing04.png" @click="collect" v-show="info.isCollect" alt="">
        <span>收藏</span>
      </p>
      <div class="cons clear">
        <p class="price" v-show="info.pay_type == '1'"><span>¥</span>{{info.price}} <s>¥{{info.original_price}}</s></p>
        <p class="price" v-show="info.pay_type == '0'">免费</p>
        <p class="num">{{info.num}}人已购买</p>
      </div>
      <div class="head flex" @click="router({path: './lecturerInfo', query: {id: teacher.id}})">
        <img class="head-img" :src="teacher.img" alt="">
        <div class="head-name">
          <p class="name">{{teacher.truename}}讲师</p>
          <p class="belong">{{teacher.title}}</p>
        </div>
        <p class="right">讲师详情 <img src="@/assets/querendingdan01.png" alt=""></p>
      </div>
    </div>
    <div class="tab-cons">
      <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
        <tab-item selected @on-item-click="onItemClick">课程介绍</tab-item>
        <tab-item @on-item-click="onItemClick">课程目录</tab-item>
      </tab>
      <div class="info" v-if="!item_index" v-html="info.content">
        
      </div>
      <div class="course-list" v-else>
        <div v-for="(item, index) in directory" class="item" @click="item_toast(item, index)">
          <img class="play" v-show="info.audio_type == '1'" src="@/assets/shipinxiangqing09.png" alt="">
          <span class="list-title" :class="(index == course_index ) ? 'active' : ''">{{item.title}}</span>
          <img v-if="!info.play" class="suo-img" src="@/assets/shipinxiangqing10.png" alt="">
          <div class="audio" v-show="info.audio_type == '0'" :class="(index == course_index ) ? 'active' : ''">
            <img src="@/assets/audio.gif" alt="" :class="(index == course_index ) ? 'active' : ''">
            <aplayer
              :music="musics"
              mode = "sigle"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="fixed" v-show="info.play == false" @click="router({path: './confirmOrder', query: {goodsId: info.id}})"><span class="btn">我要购买</span></div>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
  import Aplayer from 'vue-aplayer'
  import {couresdetails, courseCollect} from '@/api/api'
  import { Tab, TabItem, Toast, AlertModule } from 'vux'
  import { commonShare } from "@/config/wxshare"

  export default {
    components: {
      Tab,
      TabItem,
      Toast,
      Aplayer
    },
    data () {
      return {
        item_index: 0,
        toast_con: '默认',
        is_toast: false,
        is_collect: false,
        info:[],
        teacher:[],
        directory:[],
        collect_num: 0,
        course_index: null,
        videos: null,
        is_show: true,
      }
    },
    created () {
      this.id = this.$route.query.id,
      this.couresdetail()
      this.musics = {
        src: ' ',
      }
    },
    methods: {
      // 播放视屏
      playVideo() {
        this.video = document.getElementById('video')
        this.video.play()
        this.is_show = false
      },  
      // 暂停视屏
      pauseVideo() {
        this.is_show = !this.is_show        
        this.video.pause()
      },
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.item_index = index
      },
      item_toast (item, index) {
        if(this.info.play){
          this.course_index = index;
          this.videos = item.url;
          this.is_show = true;
          this.musics = {
            src: item.url
          }
        }else{
          this.is_toast = !this.is_toast
          this.toast_con = '购买后才能观看哦'
        }
      },
      collect () {
        if(this.info.isCollect){
          this.collect_num = 0;
        }else{
          this.collect_num = 1;
        }
        this.course_collect()
      },
      couresdetail () {
        couresdetails(this.id).then((res) =>{
          this.info = res.data.data.info
          this.teacher = res.data.data.info.teacher
          this.directory = res.data.data.info.directory
          commonShare(this.info.img, '智慧宝天赋教育课程', this.info.title);
        }).catch((err) => {
          console.dir(err)
        })
      },
      course_collect() {
        console.log(this.collect_num)
        var dataJson = {
          collect: this.collect_num,
          course_id: this.id
        }
        courseCollect(dataJson).then((res) => {
          if(res.data.code != 200){
            if(res.data.code == 731){
              AlertModule.show({
                title: '温馨提示',
                content: res.data.msg,
                onHide: () => {
                  this.$router.push({path: 'bindPhone'})
                }
              })
            }            
            return;
          }else{
            this.is_toast = !this.is_toast
            this.toast_con = (!this.info.isCollect) ? '已收藏到“课程收藏”中' : '已取消收藏';
            this.info.isCollect = !this.info.isCollect
          }     
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.goods-details.active
  padding-bottom 5.5rem
  box-sizing border-box
.goods-details
  min-height 100vh
  background-color #f5f5f5
  .img
    display flex
    height 21.1rem
    img
      object-fit cover
    #video
      width 100%
      object-fit cover    
    .mask-bg-video
      position absolute
      width 100%
      height 21.1rem
      background-color rgba(0,0,0,.6)
      top 0
      left 0
      img
        width 5rem
        height 5rem
        position absolute
        left 50%
        margin-left -2.5rem
        top 50%
        margin-top -2.5rem
  .top
    padding 1.5rem 0 1.5rem 1.5rem
    position relative
    background-color #fff
    margin-bottom 1rem
    .title
      font-size 1.9rem
      color #333
      font-weight bold
      width calc(100% - 10rem)
    .tag
      position absolute
      background-color #f0f0f0
      color #666
      text-align center
      font-size 1.3rem
      line-height 3rem
      font-weight 500
      width 7rem
      right 0
      top 1.5rem
      border-top-left-radius 100px
      border-bottom-left-radius 100px
      img
        width 1.5rem
        display inline-block
        vertical-align middle
      span
        display inline-block
        vertical-align middle
    .cons
      margin-top 1rem
      padding-bottom 1rem
      border-bottom 1px solid #e6e6e6
      .price
        float left
        font-size 1.7rem
        font-weight bold
        color #D03718
        span
          font-weight 400
          font-size 1.3rem
        s
          color #ccc
          font-size 1.3rem
          font-weight 400
          margin-left .5rem
      .num
        float right
        color #666
        font-size 1.2rem
        padding-right 1.5rem
        line-height 2.5rem
    .head
      display flex
      margin-top 1.5rem
      .head-img
        width 4rem
        height 4rem
        border-radius 50%
        overflow hidden
        margin-right 1rem
        max-width 4rem
      .head-name
        flex 1
        .name
          color #333
          font-weight bold
          font-size 1.3rem
          line-height 2rem
        .belong
          line-height 2rem
          font-size 1.2rem
          color #666
      .right
        line-height 4rem
        padding-right 3rem
        position relative
        img
          position absolute
          right 1.5rem
          width .6rem
          top 1.52rem
  .tab-cons  
    .list-tab
      padding-top 5rem
      .vux-tab-item.vux-tab-selected
        color #000
      .vux-tab-item
        color #999
        font-weight bold
        font-size 1.6rem
    .info
      text-indent 2em
      padding 0 1.75rem
      padding-top 2.2rem
      background-color #fff
      padding-bottom 2rem
      p
        font-size 1.2rem
        line-height 2.1rem
        color #666
        margin-bottom 2rem
    .course-list
      padding 0 1.5rem
      background-color #fff
      padding-bottom 2rem
      .item
        padding 1.5rem 0
        border-bottom 1px solid #e6e6e6
        overflow hidden
        position relative
        .play
          width 1.7rem
          height 1.7rem
          margin-right 1.3rem
          position relative
          top .2rem
          float left
        span.list-title
          float left
          font-size 1.5rem
          line-height 2.1rem
          color #333333
        span.list-title.active
          color #172F6D
          font-weight 500
        .suo-img
          width 1.1rem
          float right
          height 1.3rem
          margin-left 5.4rem
          position relative
          top .4rem
        .audio
          display none
          clear both
          padding-top 1rem
          img
            width 1.4rem
            display none
            position absolute
            top 1.6rem
            right 0
          img.active
            display block
        .audio.active
          display block
  .fixed
    background-color #fff
    padding .75rem 1.5rem
    position fixed
    bottom 0
    height 5.5rem
    width 100%
    box-sizing border-box
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .btn
      line-height 4rem
      height 4rem
      width 100%
      background-color #172F6D
      color #fff
      font-size 1.5rem
      font-weight 500
      display block
      text-align center
      border-radius 100px
</style>
